<template>
  <div class="container-fluid">
    <div class="row center-block">
      <div class="col-md-12">
        <div class="row">
          <div class="col-md-12">
            <div class="box-body">
              <div class="box box-primary">
                <div class="box-header with-border">
                  <h3 class="box-title">功能权限列表</h3>
                  <div class="box-tools pull-right">
                    <button type="button" class="btn btn btn-success">
                      <i class="fa fa-plus" @click="$root.$emit('show::modal','funcModal')">新增</i>
                    </button>
                  </div>
                </div>
                <div class="box-body">
                  <section class="content" id="funcDetail">
                    <div class="box-body box-primary">
                      <div class="box-body box-primary">
                        <div class="box-body">
                          <div class=" form-inline dt-bootstrap" id="funcForm">
                            <div class="row">
                              <div class="col-sm-12 table-responsive">
                                <table class="table table-hover table table-bordered table-striped dataTable">
                                  <tbody>
                                    <tr>
                                      <th aria-label="id" style="display:none" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting"></th>
                                      <th aria-label="名称" style="width: 142px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">名称</th>
                                      <th aria-label="默认授权" style="width: 60px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">默认授权</th>
                                      <th aria-label="功能列表" style="width: 450px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">功能列表</th>
                                      <th aria-label="操作" style="width: 90px;" colspan="1" rowspan="1" aria-controls="tblresumes" tabindex="0" class="sorting">操作</th>
                                    </tr>
                                    <tr v-for='(value,key) in this.funcPrivs' role="row" class="value.cls">
                                      <td style="display:none"> {{ value.id }}</td>
                                      <td> {{ value.name }}</td>
                                      <td> {{ value.default }}</td>
                                      <td class="text-light" v-text="arrayToString(value.functions)"></td>
                                      <td>
                                        <button type="button" class="btn btn-primary ">
                                          <i class="fa fa-eye">查看</i>
                                        </button>
                                        <button type="button" class="btn btn btn-success" @click="editFunc(value.id)">
                                          <i class="fa fa-edit">编辑</i>
                                        </button>
                                        <button type="button" class="btn btn btn-warning" @click="delFunc(value.id)">
                                          <i class="fa fa-trash">删除</i>
                                        </button>
                                      </td>
                                    </tr>
                                  </tbody>
                                </table>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </section>
                </div>
              </div>
            </div>
          </div>
        </div>
        <b-modal id='funcModal' title='新增功能授权' close-title='关闭' ok-title='保存' @ok='submitNewFunc' @shown='clearEditData'>
          <div class="form-horizontal">
            <div class="box-body">
              <funcPrivEdit ref='funcPrivEdit' v-bind:isReadOnly="false"></funcPrivEdit>
            </div>
          </div>
        </b-modal>
      </div>
    </div>
  </div>
</template>
<script>
import Common from "./common"
import funcPrivEdit from "../mycomponents/funcPriv/funcPrivEdit"
export default {
  name: "funcPrivMgr",
  data() {
    return {
      restApi:null,
      selectedFunc:null,
      helper:null,
      funcPrivs: [
        {
          "id": 1,
          "name": "基本功能",
          "default":"是",
          "functions": ["人事信息查询"]
        },
        {
          "id": 2,
          "name": "高级功能",
           "default":"否",
          "functions": ["系统管理", "人事档案管理", "审批管理"]
        }
      ]
    }
  },
  components:{
    funcPrivEdit
  },
  created:function(){
    this.helper = new Common()
  },
  mounted:function(){
    this.$nextTick(() => {
      this.helper.autoheight("funcDetail")
    })
  },
  methods: {
    arrayToString: function(array) {
      return array.toString()
    },
    editFunc:function(roleId){
      this.selectedFunc = this.getFunc(roleId)
      if(this.selectedFunc){
        this.$root.$emit('show::modal','funcModal')
      }
    },
    submitNewFunc:function(){

    },
    clearEditData:function(){

    },
    getFunc:function(roleId){
      for(var index in this.funcs){
        if(this.funcs[index].id == roleId){
          return this.funcs[index]
        }
      }
      return null
    }
  }
}
</script>

